<template>
  <div>
    <div class="app-box">
      <div class="app-box-content" >
        <div class="app-box-content-menu" @click="appActivate">
          <n-icon size="30">
            <list-circle-outline />
          </n-icon>
        </div>
        <div>
          <img src="../assets/images/logo.png">
        </div>
        <div class="app-box-content-search" @click="openSearch">
          <n-icon size="30">
            <Search />
          </n-icon>
        </div>
      </div>
      <n-drawer v-model:show="appActive" :width="400" placement="left">
        <div class="drawermenu">
          <div class="drawermenu-userinfo">
            <img src="../assets/images/1000141.jpg" alt="侧边背景">
            <div class="drawermenu-userinfo-content">
              <img :src="userInfo.avatar" alt="头像">
              <h1>{{ userInfo.userName }}</h1>
              <p>{{ userInfo.sign }}</p>
              <div>
                <n-button
                  class="drawermenu-userinfo-content--button"
                  v-for="(item,index) in userInfo.myTag"
                  :key="index"
                  :color="item.type"
                  size="small">
                  <template #icon>
                    <span :class="'iconfont' + ' ' + item.icon"></span>
                  </template>
                  {{ item.name }}
                </n-button>
              </div>
            </div>
          </div>
          <div class="drawermenu-menu">
            <n-menu
              :options="menuOptions"
              accordion
            />
          </div>
        </div>
      </n-drawer>
      <n-modal v-model:show="showModal">
        <n-card
          style="width: 98%; position: fixed; left: 1%; top: 60px"
          title=""
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
          <n-input-group >
            <n-button type="primary">
              搜索
            </n-button>
            <n-input 
              :style="{ width: '100%' }"
              v-model:value="appSearchValue"
              placeholder="输入关键字" />
            <n-button type="primary" ghost @click="submitSearch">
              搜索
            </n-button>
          </n-input-group>
          <n-divider dashed>
            <span class="iconfont icon-react2" style="color:#e96f92;font-size:24Px"></span>
          </n-divider>
          <n-collapse accordion>
            <n-collapse-item title="猜你喜欢" name="1">
              <div class="like">
                <n-button
                  class="like-button"
                  v-for="(item,index) in userInfo.myTag"
                  :key="index"
                  :color="item.type"
                  size="small">
                  <template #icon>
                    <span :class="'iconfont' + ' ' + item.icon"></span>
                  </template>
                  {{ item.name }}
                </n-button>
              </div>
            </n-collapse-item>
            <n-collapse-item title="登录注册" name="2">
              <div class="login">
                <n-tabs
                  class="card-tabs"
                  default-value="signin"
                  size="large"
                  animated
                  pane-wrapper-style="margin: 0 -4px"
                  pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
                >
                  <n-tab-pane name="signin" tab="登录">
                    <n-form ref="loginFormRef" :model="loginModel" :rules="loginRules">
                      <n-form-item path="userNasme" label="用户名">
                        <n-input v-model:value="loginModel.userNasme"/>
                      </n-form-item>
                      <n-form-item path="passWord" label="密码">
                        <n-input type="password" v-model:value="loginModel.passWord"/>
                      </n-form-item>
                    </n-form>
                    <n-button
                      type="primary"
                      block secondary strong
                      @click="Login">
                      登录
                    </n-button>
                  </n-tab-pane>
                  <n-tab-pane name="signup" tab="注册">
                    <n-form ref="regFormRef" :model="regModel" :rules="reginRules">
                      <n-form-item path="userNasme" label="用户名">
                        <n-input v-model:value="regModel.userNasme"/>
                      </n-form-item>
                      <n-form-item path="passWord" label="密码">
                        <n-input type="password" v-model:value="regModel.passWord"/>
                      </n-form-item>
                    </n-form>
                    <n-button 
                      type="primary" 
                      block secondary strong
                      @click="register">
                      注册
                    </n-button>
                  </n-tab-pane>
                </n-tabs>
              </div>
            </n-collapse-item>
          </n-collapse>
        </n-card>
      </n-modal>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Search,
  ListCircleOutline,
  Home,
  Person,
  ShareSocialSharp,
  Wallet,
  NewspaperOutline,
  LinkSharp,
  HeartCircleSharp,
  RibbonSharp,
  PieChart,
  LogoVue,
  LogInOutline
 } from '@vicons/ionicons5'
 import {
  NInput,
  NIcon,
  useNotification,
  FormItemRule
} from "naive-ui"
const notification = useNotification()
 function renderIcon (icon: string) {
  return () => h("span", {
    class:'iconfont' + ' ' +  icon
   })
}
const menuOptions = reactive([
  {label:'首页',key:1,icon:renderIcon('icon-shouye1')},
  {label:'关于我',key:2,icon:renderIcon('icon-user')},
  {
    label:'技术分享',key:3,icon:renderIcon('icon-fenxiang'),
    children:[
      {label:'Vue',key:31,icon:renderIcon('icon-vuejs1')},
    ]
  },
  {label:'随记',key:4,icon:renderIcon('icon-biji')},
  {label:'留言板',key:5,icon:renderIcon('icon-liuyanban-xian')},
  {label:'友情链接',key:6,icon:renderIcon('icon-line-093')},
  {label:'推荐',key:7,icon:renderIcon('icon-tuijian')},
  {label:'赞助',key:8,icon:renderIcon('icon-zanzhu')},
  {label:'统计',key:9,icon:renderIcon('icon-tongji2')}
])
const userInfo = reactive({
  userName:'国服卤蛋',
  sign:'拒绝女色，振兴中华',
  myTag:[
    { name:'javascript',type:'#8a2be2',icon:'icon-nodejs1' },
    { name:'Vue',type:'#18a058',icon:'icon-vue' },
    { name:'nodejs',type:'#f0a020',icon:'icon-node' },
    { name:'react',type:'#ff69b4',icon:'icon-React' },
    { name:'html',type:'#2080f0',icon:'icon-html3' },
    { name:'css',type:'#d03050',icon:'icon-css3' }
  ],
  avatar:'http://www.lihyweb.cn/song/huang.webp'
})
const appActive = ref(false)
const appActivate = () => {
  appActive.value = true
}
const showModal = ref(false)
const openSearch = () => {
  showModal.value = true
}
//app
const appSearchValue = ref('')
const submitSearch = () => {
  console.log(appSearchValue.value)
}
//登录注册
const loginFormRef = ref(null)
const loginModel = reactive({
  userNasme: null,
  passWord: null
})
const loginRules = reactive({
  userNasme:[
    {
      required: true,
      message: '请输入用户名'
    }
  ],
  passWord:[
    {
      required: true,
      validator (rule: FormItemRule, value: string) {
        if (!value) {
          return new Error('请输入密码')
        } else if (!/^[A-Za-z0-9]+$/.test(value)) {
          return new Error('密码必须数字和字母组合')
        } else if(value.length > 11){
          return new Error('密码不超过11位')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ]
})
const regFormRef = ref(null)
const regModel = reactive({
  userNasme: null,
  passWord: null
})
const reginRules = reactive({
  userNasme:[
    {
      required: true,
      message: '请输入用户名'
    }
  ],
  passWord:[
    {
      required: true,
      validator (rule: FormItemRule, value: string) {
        if (!value) {
          return new Error('请输入密码')
        } else if (!/^[A-Za-z0-9]+$/.test(value)) {
          return new Error('密码必须数字和字母组合')
        } else if(value.length > 11){
          return new Error('密码不超过11位')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ]
})
const Login = (e)=>{
  e.preventDefault()
  loginFormRef.value?.validate((errors) => {
    if (!errors) {
      notification['success']({
        content: '通知',
        meta: '验证成功',
        duration: 2500,
        keepAliveOnHover: true
      })
    } else {
      notification['error']({
        content: '通知',
        meta: '验证失败',
        duration: 2500,
        keepAliveOnHover: true
      })
    }
  })
}
const register = (e) => {
  e.preventDefault()
  regFormRef.value?.validate((errors) => {
    if (!errors) {
      notification['success']({
        content: '通知',
        meta: '验证成功',
        duration: 2500,
        keepAliveOnHover: true
      })
    } else {
      notification['error']({
        content: '通知',
        meta: '验证失败',
        duration: 2500,
        keepAliveOnHover: true
      })
    }
  })
}
</script>
<style scoped lang="scss">
.app-box{
  width: 100%;
  height: 60Px;
  // background: rgba($color: #5f8d4e, $alpha: .4);
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  position: fixed;
  top: 0;
  &-content{
    width: 100%;
    height: 60Px;
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    img{
      height: 50Px;
    }
    .n-icon{
      cursor: pointer;
    }
    &-menu{
      margin-left: 40px;
    }
    &-search{
      margin-right: 40px;
    }
  }
}
.drawermenu{
  &-userinfo{
    position: relative;
    img{
      width: 100%;
    }
    &-content{
      position: absolute;
      background: rgba($color: #fff, $alpha: .1);
      top: 150Px;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
        width: 80Px;
        height: 80Px;
        border-radius: 40Px;
        left: 50%;
      }
      h1{
        font-size: 20Px;
        margin-bottom: 10px;
      }
      p{
        margin-bottom: 20px;
      }
      &--button{
        margin-left: 20px;
        margin-bottom: 10Px;
      }
    }
  }
  &-menu{
    margin-top: 180Px;
  }
}

</style>